<template>
	<div v-if="showTopList" class="recommand-list">
		<img src="@/assets/images/watermark.png" class="water-img" alt="">
		<div v-for="(item) in topList" :key="item.projectId" class="recommand-item"
			@click="handleCheckoutWork(item.projectId)">
			<div class="recommand-image-container">
				<img class="recommand-image" :src="item.coverUrl"/>
			</div>
			<div class="recommand-mask">
				<img class="recommand-mask-search-icon" src="~@/assets/icon/seek.png"/>
				<div class="recommand-mask-text">
					<div class="recommand-mask-name">{{ item.name }}</div>
					<div class="recommand-mask-category">{{ item.nameEn }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {}
	},
	computed: {
		...mapGetters(['topList']),
		showTopList() {
			return this.topList && this.topList.length;
		}
	},
	created() {},
	methods: {
		handleCheckoutWork(slug) {
			let query = !this.$route.query.cat_id ? {cat_id: 'areaFlag'} : this.$route.query;
			this.$router.push({
				path: "works/detail",
				query: {...query, detail_id: slug}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.recommand-list {
	font-size: 0;
	position: relative;
}
.water-img{
	position: fixed;
	width: 150px;
	top: 15px;
	right: 15px;
	z-index: 999;
}
.recommand-item {
	position: relative;
	transition: all 0.3s;
	.recommand-mask {
		display: none;
		.recommand-mask-search-icon {
			display: none;
		}
		// .recommand-mask-name {
		// 	display: none;
		// }
	}
	&:hover {
		.recommand-mask {
			cursor: url(../assets/icon/circle.svg) 15 15, auto;
			animation: desalt 0.2s ease-in 1;
			display: inline-block;
			flex-direction: column;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.3);
			.recommand-mask-search-icon {
				display: inline-block;
				width: 16px;
				height: 16px;
			}
			.recommand-mask-text {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;
				font-weight: 600;
				color: #fff;
			}
		}
	}
}
.recommand-image-container{
	width: 100%;
	position: relative;
}
.recommand-image{
	width: 100%;
}

@keyframes desalt {
	from {
		background-color: rgba(0, 0, 0, 0);
	}
	to {
		background-color: rgba(0, 0, 0, 0.3);
	}
}
</style>